<template>
    <div class="rightBottom">
        <div class="title-wrap">POP规模分级分类</div>
        <div class="wrap flex">
            <div class="left">
                <my-title
                    top="14px"
                    left="0px"
                    title="店铺（月均规模 开店>3个月）"
                ></my-title>
                <div class="chart" ref="chart-1"></div>
            </div>
            <div class="right">
                <div class="swiper">
                    <my-title
                        top="14px"
                        left="0px"
                        title="小微 - 运营质量"
                    ></my-title>
                    <div class="select flex">
                        <div
                            v-for="(item, index) in selectOptions"
                            :key="item.val"
                            class="item"
                            :class="{ act: index == select }"
                            @click="handleSelect(index)"
                        >
                            {{ item.name }}
                        </div>
                    </div>
                    <el-carousel
                        class="carousel"
                        :autoplay="false"
                        indicator-position="none"
                        arrow="never"
                        ref="carousel"
                        height="150px"
                    >
                        <el-carousel-item
                            v-for="(item, index) in carouselList"
                            :key="index"
                        >
                            <div class="list flex space-between">
                                <table>
                                    <thead>
                                        <td>小微</td>
                                        <td>L5店铺</td>
                                        <td>占比</td>
                                    </thead>
                                    <tbody>
                                        <tr
                                            v-for="(
                                                row, rowIndex
                                            ) in item.slice(0, 6)"
                                            :key="`row-${rowIndex}`"
                                        >
                                            <td>{{ row.name }}</td>
                                            <td>{{ row.count }}</td>
                                            <td>{{ row.value }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table>
                                    <thead>
                                        <td>小微</td>
                                        <td>L5店铺</td>
                                        <td>占比</td>
                                    </thead>
                                    <tbody>
                                        <tr
                                            v-for="(
                                                row, rowIndex
                                            ) in item.slice(6, 12)"
                                            :key="`row-${rowIndex}`"
                                        >
                                            <td>{{ row.name }}</td>
                                            <td>{{ row.count }}</td>
                                            <td>{{ row.value }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table>
                                    <thead>
                                        <td>小微</td>
                                        <td>L5店铺</td>
                                        <td>占比</td>
                                    </thead>
                                    <tbody>
                                        <tr
                                            v-for="(
                                                row, rowIndex
                                            ) in item.slice(12, 18)"
                                            :key="`row-${rowIndex}`"
                                        >
                                            <td>{{ row.name }}</td>
                                            <td>{{ row.count }}</td>
                                            <td>{{ row.value }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="pagi flex space-center">
                    <img
                        v-for="page in pages"
                        :key="page"
                        :src="page == current ? actIcon : icon"
                        alt=""
                        @mouseenter="hover(page)"
                    />
                </div>
                <my-title
                    top="210px"
                    left="0px"
                    title="小微 - 月均规模(万元)"
                ></my-title>

                <div class="month flex space-between" v-if="rightBottomData2">
                    <div class="column">
                        <div class="head">头部小微</div>
                        <div class="body">
                            <div
                                class="item flex space-between"
                                v-for="(i, ind) in rightBottomData2.top.list"
                                :key="ind"
                            >
                                <div class="flex">
                                    <span
                                        class="icon"
                                        :class="{ yellow: ind < 3 }"
                                    >
                                        {{ ind + 1 }}</span
                                    >
                                    <span class="name">{{ i.name }}</span>
                                </div>
                                <span class="value">{{
                                    i.val | amountFilter
                                }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="head">中部小微</div>
                        <div class="body">
                            <div
                                class="item flex space-between"
                                v-for="(i, ind) in rightBottomData2.mid.list"
                                :key="ind"
                            >
                                <div class="flex">
                                    <span
                                        class="icon"
                                        :class="{ yellow: ind < 3 }"
                                    >
                                        {{ ind + 1 }}</span
                                    >
                                    <span class="name">{{ i.name }}</span>
                                </div>
                                <span class="value">{{
                                    i.val | amountFilter
                                }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="head">薄弱小微</div>
                        <div class="body">
                            <div
                                class="item flex space-between"
                                v-for="(i, ind) in rightBottomData2.bottom.list"
                                :key="ind"
                            >
                                <div class="flex">
                                    <span
                                        class="icon"
                                        :class="{ yellow: ind < 3 }"
                                    >
                                        {{ ind + 1 }}</span
                                    >
                                    <span class="name">{{ i.name }}</span>
                                </div>
                                <span class="value">{{
                                    i.val | amountFilter
                                }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { queryStoreData3 } from "@/api/index";
export default {
    props: {
        rightBottomData1: {},
        rightBottomData2: {},
    },
    data() {
        return {
            current: 1,
            actIcon: require("@/assets/img/storeData/act-icon.png"),
            icon: require("@/assets/img/storeData/icon.png"),
            rightBottomData3: [],
            title3: "",
            selectOptions: [
                {
                    name: "头部小微",
                    val: 0,
                },
                {
                    name: "中部小微",
                    val: 1,
                },
                {
                    name: "薄弱小微",
                    val: 2,
                },
            ],
            select: 0,
        };
    },
    computed: {
        carouselList() {
            let [start, end, result] = [null, null, []];
            for (
                let i = 0;
                i < Math.ceil(this.rightBottomData3.length / 18);
                i++
            ) {
                start = i * 18;
                end = start + 18;
                result.push(this.rightBottomData3.slice(start, end));
            }
            console.log(result);
            return result;
        },
        pages() {
            return this.rightBottomData3.length
                ? Math.ceil(this.rightBottomData3.length / 18)
                : 0;
        },
    },
    watch: {
        rightBottomData1(newVal) {
            this.$nextTick(() => {
                this.chartInit1(newVal);
            });
        },
    },
    filters: {
        amountFilter(val) {
            return val > 9999 ? (val / 10000).toFixed(1) + "W" : val;
        },
    },
    mounted() {
        this.$nextTick(() => {
            this.getStoreData3(this.select);
        });
    },
    methods: {
        getStoreData3(val) {
            queryStoreData3({ query: val }).then((res) => {
                this.rightBottomData3 = res.data;
                this.current = 1;
                this.$refs["carousel"].setActiveItem(this.current - 1);
            });
        },
        arrSplit(arr) {
            let _arr = [[], [], []];
            let _index = 0;
            console.log(_arr);
            arr.forEach((item, index) => {
                _arr[_index].push(item);
                if (index % 5 == 0 && index != 0) {
                    _index++;
                }
            });
            console.log(_arr);
            return _arr;
        },
        chartInit1(data) {
            let _chart = this.$echarts.init(this.$refs["chart-1"]);
            let _option = {
                tooltip: {
                    trigger: "axis",
                    formatter: (params) => {
                        let arr = [
                            "≥1000W",
                            "≥500＜1000W",
                            "≥100＜500W",
                            "≥50＜100W",
                            "＜50W",
                        ];
                        let val = `${arr[params[3].dataIndex]}<br/>`;
                        params.forEach((item) => {
                            if (
                                item.seriesName == "数量" ||
                                item.seriesName == "金额"
                            ) {
                                val += `${item.marker}${item.seriesName}:${
                                    item.value
                                }${item.seriesName == "金额" ? "W" : ""}<br/>`;
                            }
                        });
                        return val;
                    },
                },
                grid: {
                    bottom: 30,
                    top: 80,
                    right: 60,
                },
                xAxis: [
                    {
                        type: "category",
                        data: data.map((item) => item.name),
                        axisLabel: {
                            textStyle: {
                                fontSize: 14,
                                color: "#8fadcc",
                            },
                            margin: 10, //刻度标签与轴线之间的距离。
                        },

                        axisLine: {
                            show: true, //不显示x轴
                            lineStyle: {
                                color: "#3c5285",
                            },
                        },
                        axisTick: {
                            show: false, //不显示刻度
                        },

                        splitLine: {
                            show: false,
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "数量",
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "#eee",
                                type: "solid",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#3c5285",
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 14,
                                color: "#8fadcc",
                            },
                        },
                    },
                    {
                        type: "value",
                        name: "金额(W)",
                        position: "right",
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#3c5285",
                            },
                        },
                        axisLabel: {
                            margin: 10,

                            textStyle: {
                                fontSize: 14,
                                color: "#8fadcc",
                            },
                            formatter: (params) => {
                                return params > 9999
                                    ? params / 10000 + "W"
                                    : params;
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        //柱底圆片
                        name: "",
                        type: "pictorialBar",
                        symbolSize: [20, 8],
                        symbolOffset: [0, 5],
                        z: 12,
                        itemStyle: {
                            normal: {
                                color: "#0043aa",
                            },
                        },
                        data: data.map((item) => item.count),
                    },
                    //柱顶圆片
                    {
                        name: "",
                        type: "pictorialBar",
                        symbolSize: [20, 8],
                        symbolOffset: [0, -5],
                        z: 12,
                        symbolPosition: "end",
                        itemStyle: {
                            normal: {
                                color: "#29b0ff",
                            },
                        },
                        data: data.map((item) => item.count),
                    },
                    //柱体
                    {
                        name: "数量",
                        type: "bar",
                        barWidth: 20,
                        barGap: "0%",
                        itemStyle: {
                            normal: {
                                color: "#0054b9",
                            },
                        },

                        data: data.map((item) => item.count),
                    },

                    {
                        name: "金额",
                        type: "line",
                        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        symbol: "circle", //标记的图形为实心圆
                        showSymbol: false,
                        z: 13,
                        symbolSize: 8, //标记的大小
                        itemStyle: {
                            normal: {
                                color: "#ffd400",
                                borderColor: "rgba(255, 234, 0, 0.5)", //圆点透明 边框
                                borderWidth: 5,
                            },
                        },
                        lineStyle: {
                            color: "#ffd400",
                        },

                        data: data.map((item) => item.amount),
                    },
                ],
            };
            _chart.setOption(_option);
        },
        hover(val) {
            this.current = val;
            this.$refs["carousel"].setActiveItem(this.current - 1);
        },
        handleSelect(val) {
            this.select = val;
            this.getStoreData3(val);
        },
    },
    created() {},
};
</script>
<style lang='less' scoped>
.rightBottom {
    width: 1060px;
    height: 380px;
    position: absolute;
    left: 803px;
    top: 590px;
    padding-left: 10px;
    background-color: rgba(0, 16, 64, 0.3);
    .title-wrap {
        width: 1050px;
        height: 35px;
        background-image: url(../../../assets/img/storeData/title-bg.png);
        font-size: 18px;
        line-height: 35px;
        padding-left: 20px;
        letter-spacing: 2px;
    }
    .pagi {
        margin: 10px 0;
    }
    .wrap {
        position: relative;
        height: 344px;
        .left {
            position: relative;
            width: 420px;
            height: 344px;
            .chart {
                width: 100%;
                height: 100%;
            }
        }
        .right {
            position: relative;
            height: 344px;
            flex: 1;
            .swiper {
                position: relative;
                width: 100%;
                height: 190px;
                overflow: hidden;
                .select {
                    position: absolute;
                    top: 0px;
                    right: 10px;
                    font-size: 12px;
                    .item {
                        margin-left: 24px;
                        cursor: pointer;
                        text-align: center;
                        padding-top: 16px;
                        color: #8fadcc;
                        width: 80px;
                        height: 36px;
                        &.act {
                            background-image: url(../../../assets/img/storeData/guang.png);
                            color: #fff;
                        }
                    }
                }

                .carousel {
                    width: 610px;
                    height: 150px;
                    margin-top: 40px;
                    .list {
                        height: 150px;
                        align-content: flex-start;
                        align-items: flex-start;
                        table {
                            font-size: 12px;
                            width: 200px;
                            text-align: center;
                            thead {
                                background-color: #021e5b;
                                height: 22px;
                                line-height: 22px;
                            }
                            tbody {
                                td {
                                    height: 20px !important;
                                    line-height: 20px;
                                }
                            }
                        }
                    }
                    .el-carousel__item {
                        height: 150px;
                    }
                    .item {
                        width: 200px;
                        height: 26px;
                        margin-right: 4px;
                        padding: 0 8px;
                        .name,
                        .value {
                            font-size: 12px;
                            color: #8fadcc;
                        }
                    }
                }
            }
            .month {
                margin-top: 30px;
                height: 120px;
                font-size: 12px;
                .column {
                    width: 190px;
                    height: 120px;
                    .head {
                        height: 20px;
                    }
                    .body {
                        height: 100px;
                        overflow-y: scroll;
                        .item {
                            height: 25px;
                            line-height: 25px;
                            &:nth-child(odd) {
                                background-color: rgba(0, 106, 255, 0.15);
                            }
                            &:nth-child(even) {
                                background-color: rgba(0, 20, 78, 0.7);
                            }
                            .icon {
                                width: 18px;
                                height: 18px;
                                border-radius: 50%;
                                background-color: #013d91;
                                line-height: 18px;
                                text-align: center;
                                font-size: 12px;
                                margin-right: 10px;
                                &.yellow {
                                    background-color: #ff9500;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .extension {
        position: fixed;
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        span {
            color: white;
            font-size: 16px;
        }
    }
}
</style>